<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>>选项卡控制标签页的显示或隐藏</title>
    <style type="text/css">
        *{
            font-family: "微软雅黑";
            font-size: 14px;
        }
        a img{
            border: none;
        }
        #controlSlide{
            width: 360px;
            height: 29px;
            color: #666;
            margin: 0;
            padding: 0;
            background-color: #5899ce;
        }
        #controlSlide li{
            float: left;
            width: 45px;
            height: 24px;
            line-height: 24px;
            background-color: #5899ce;
            text-align: center;
            padding-bottom: 3px;
        }
        #controlSlide li a{
            text-decoration: none;
            color: #003276;
            cursor: pointer;
        }
        #controlSlide li.current{
            width: 45px;
            background-color: black;
        }
        #controlSlide li.current a{
            color: white;
        }
        .newImg{
            width: 360px;
            height: 220px;
        }
        li{
            list-style-type: none;
        }
    </style>
    <script type="text/javascript">
        function setCurrentTab(index) {
            for (var i = 1; i <= 8; i++)
            {
                if (i == index)
                {
                    document.getElementById("slide_" + i).className = "current";
                    document.getElementById("tab_" + i).style.display = "block";
                }
                else
                {
                    document.getElementById("slide_" + i).className = "";
                    document.getElementById("tab_" + i).style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <ul id="controlSlide">
            <li id="slide_1" onmouseover="setCurrentTab(1);" class="current"><a href="#" target="_blank">国际</a></li>
            <li id="slide_2" onmouseover="setCurrentTab(2);"><a href="#" target="_blank">娱乐</a></li>
            <li id="slide_3" onmouseover="setCurrentTab(3);"><a href="#" target="_blank">体育</a></li>
            <li id="slide_4" onmouseover="setCurrentTab(4);"><a href="#" target="_blank">汽车</a></li>
            <li id="slide_5" onmouseover="setCurrentTab(5);"><a href="#" target="_blank">军事</a></li>
            <li id="slide_6" onmouseover="setCurrentTab(6);"><a href="#" target="_blank">社会</a></li>
            <li id="slide_7" onmouseover="setCurrentTab(7);"><a href="#" target="_blank">游戏</a></li>
            <li id="slide_8" onmouseover="setCurrentTab(8);"><a href="#" target="_blank">科技</a></li>
        </ul>
        <div id="divTabList">
            <div class="divTab" id="tab_1">
                <a href="#"><img class="newImg" src="image/1.jpg" alt="" /></a>
                <h3>冬奥生活抵达韩国</h3>
            </div>
            <div class="divTab" id="tab_2" style="display: none;">
                <a href="#"><img class="newImg" src="image/2.jpg" alt="" /></a>
                <h3>小贝突袭球场切磋球技 与“迷弟”大玩自拍无架子</h3>
            </div>
            <div class="divTab" id="tab_3" style="display: none;">
                <a href="#"><img class="newImg" src="image/3.jpg" alt="" /></a>
                <h3>欧冠小组赛 B 组：凯尔特人 Vs 拜仁慕尼黑</h3>
            </div>
            <div class="divTab" id="tab_4" style="display: none;">
                <a href="#"><img class="newImg" src="image/4.jpg" alt="" /></a>
                <h3>斯柯达文化之旅-上</h3>
            </div>
            <div class="divTab" id="tab_5" style="display: none;">
                <a href="#"><img class="newImg" src="image/5.jpg" alt="" /></a>
                <h3>枪声四起，武警官兵中原腹地上演“枪王争霸”</h3>
            </div>
            <div class="divTab" id="tab_6" style="display: none;">
                <a href="#"><img class="newImg" src="image/6.jpg" alt="" /></a>
                <h3>去年万圣节吓哭同学的小女孩</h3>
            </div>
            <div class="divTab" id="tab_7" style="display: none;">
                <a href="#"><img class="newImg" src="image/7.jpg" alt="" /></a>
                <h3>《绝地求生：大逃杀》中国活跃玩家数量达 600 万</h3>
            </div>
            <div class="divTab" id="tab_8" style="display: none;">
                <a href="#"><img class="newImg" src="image/8.jpg" alt="" /></a>
                <h3>iPhone X 真机刘海出现瑕疵</h3>
            </div>
        </div>
    </div>
</body>
</html>
